<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_6-功能完整的用户注册页面</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div class="container" id="Application">
        <div class="container">
            <div class="subTitle">加入我们，一起创造美好世界</div>
            <h1 class="title">创建你的账号</h1>
            <div v-for="(item, index) in fields" class="inputContainer">
                <div class="field">{{item.title}}
                    <span v-if="item.required" style="color: red;">*</span>
                </div>

                <input v-model="item.model" class="input" :type="item.type" />
                <div class="tip" v-if="index == 2">请确认密码程度需要大于6位</div>
            </div>

            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input v-model="receiveMsg" class="checkbox" type="checkbox" />
                <label class="label">接受更新邮件</label>
            </div>


        </div>
        <button @click="createAccount" class="btn">创建账号</button>



    </div>




    <script>
        const App = {
            data() {
                return {
                    fields: [
                        {
                            title: "用户名",
                            required: true,
                            type: "text",
                            model: "",
                        },

                        {
                            title: "邮箱地址",
                            required: false,
                            type: "text",
                            model: "",
                        },

                        {
                            title: "密码",
                            required: true,
                            type: "password",
                            model: "",
                        },

                    ],
                    receiveMsg: false,
                }
            },

            computed: {
                name: {
                    get() {
                        return this.fields[0].model
                    },

                    set(value) {
                        this.fields[0].model = value//???
                    }
                },

                email: {
                    get() {
                        return this.fields[1].model
                    },

                    set(value) {
                        this.fields[1].model = value
                    }
                },

                password: {
                    get() {
                        return this.fields[2].model
                    },

                    set(value) {
                        this.fields[2].model = value
                    }
                },
            },

            methods: {
                emailCheck() {
                    var verify = /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
                    if (!verify.test(this.email)) {//???
                        return false
                    } else {
                        return true
                    }
                },

                createAccount() {
                    if (this.name.length == 0) {
                        alert("请输入用户名")
                        return
                    } else if (this.password.length <= 6) {
                        alert("密码设置需大于六位字符")
                        return
                    } else if (this.email.length > 0 && !this.emailCheck(this.email)) {
                        alert("请输入正确的邮箱")
                        return
                    }

                    alert("注册成功")
                    console.log(`name:${this.name}\npassword:${this.password}\nemail:${this.email}\nreceiveMsg:${this.receiveMsg}`)
                }
            }
        }
        Vue.createApp(App).mount("#Application")

    </script>




    <style>
        .container {
            margin: 0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        }

        .subTitle {
            color: gray;
            font-size: 14px;
        }

        .title {
            font-size: 45px;
        }

        .input {
            width: 90%;
        }

        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }

        .subContainer {
            text-align: left;
        }

        .field {
            font-size: 14px;
        }

        .input {
            border-radius: 6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }

        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }

        .setting {
            font-size: 9px;
            color: blank;
        }

        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align: middle;
            /*该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。*/
            /*???*/
        }

        .checkbox {
            height: 20px;
            vertical-align: middle;
        }

        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            color: white;
        }
    </style>



</body>

</html>